//初始化swiper

//banner获取轮播数据,使用接口调用
//axios库
function loadBanner() {
    axios({
        method: 'get',
        url: 'http://api.yuguoxy.com/api/shop/banner'
    }).then(Response => {
        let data = Response.data
        if (data.resultCode == 1) {
            let list = data.resultInfo.list
            showBanner(list)
        }
    })

}
loadBanner()
/**
 * 动态渲染轮播图片
 * @param {*} list 
 */
function showBanner(list) {
    let str = list.map(item => {
        return `<div class="swiper-slide">
                   <img src="${item.url}" alt="${item.content}">
               </div>`
    }).join('')

    const swiperWrapper = document.querySelector('.swiper-wrapper')
    swiperWrapper.innerHTML = str

    //  initSwiper()
    let mySwiper = new Swiper('.swiper', {
        autoplay: true, //可选选项，自动滑动
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

    })

}

/* 
 *给商品项绑定点击事件使其跳转至商品详情页
 */


// function onGoToDetails() {
//     const productEle = document.querySelector('.product-img')
//     console.log(productEle);
//     productEle.addEventListener('click', (e) => {
//         e = e || window.event
//         console.log(this);
//         // console.log(this.getAttribute('data-index'));
//         // location.href = '../pages/details.html'
//     })
// }

/**
 * 显示用户信息
 * 1. 从localStorage中获取保存的用户信息
 * 2. 动态渲染页面
 */
 function showUser() {
    let user = localStorage.getItem('PERSON')
    user = JSON.parse(user)
    let headerStr = `
        <span>${user[0].username}</span>
        <a class="logout">退出</a>
     
     `
     if (user.length != 0) {
        let title = document.querySelector('.user-information')
        title.innerHTML = headerStr

     }
     let title = document.querySelector('.user-information')
     title.innerHTML = headerStr
}

/**
 * 退出
 *   1. 清除localStorage登录用户信息
 */
function logout() {
    const logoutBtn = document.querySelector('.logout')
    logoutBtn.addEventListener('click', function () {
        // 1. 清除localStorage登录用户信息
        localStorage.removeItem('USER')
        // 2. 跳转到登录界面
        location.href = './login.html'
    })
}








showUser()
logout()

